<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-content">
        <div class="logo">
          <h1>📝 Kosin</h1>
          <span class="tagline">智能写作分析平台</span>
        </div>
        <div class="nav-links">
          <router-link to="/" class="nav-link active">首页</router-link>
          <router-link to="/ocr" class="nav-link">开始分析</router-link>
          <router-link to="/login" class="nav-link">登录</router-link>
          <router-link to="/register" class="nav-link">注册</router-link>
        </div>
      </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section">
      <div class="hero-content">
        <div class="hero-text">
          <h1 class="hero-title">
            <span class="gradient-text">开源免费</span>的智能写作分析平台
          </h1>
          <p class="hero-subtitle">
            从小学到大学，从考公到考研<br>
            专业的AI写作分析，助力每一次笔试成功
          </p>
          <div class="hero-features">
            <div class="feature-tag">🎓 全学段覆盖</div>
            <div class="feature-tag">🆓 完全免费</div>
            <div class="feature-tag">🔓 开源透明</div>
            <div class="feature-tag">🤖 AI智能分析</div>
          </div>
          <div class="hero-actions">
            <router-link to="/ocr" class="btn-primary">
              <span>立即开始分析</span>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </router-link>
            <a href="#features" class="btn-secondary">了解更多</a>
          </div>
        </div>
        <div class="hero-visual">
          <div class="floating-cards">
            <div class="card card-1">
              <div class="card-icon">🎒</div>
              <div class="card-title">小学作文</div>
              <div class="card-score">85分</div>
            </div>
            <div class="card card-2">
              <div class="card-icon">🎓</div>
              <div class="card-title">CET4/6</div>
              <div class="card-score">92分</div>
            </div>
            <div class="card card-3">
              <div class="card-icon">🏛️</div>
              <div class="card-title">公务员</div>
              <div class="card-score">88分</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 特色功能区域 -->
    <section id="features" class="features-section">
      <div class="container">
        <div class="section-header">
          <h2>为什么选择 Kosin？</h2>
          <p>专业的AI技术，覆盖全学段的写作分析需求</p>
        </div>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">🎯</div>
            <h3>精准分析</h3>
            <p>基于先进的AI算法，从内容、结构、语言等多维度进行深度分析，提供专业的改进建议</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">📊</div>
            <h3>可视化报告</h3>
            <p>直观的图表展示，雷达图、柱状图等多种形式，让分析结果一目了然</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">🎓</div>
            <h3>全学段覆盖</h3>
            <p>从小学作文到大学论文，从四六级到雅思托福，从考公申论到考研作文，全面覆盖</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">🚀</div>
            <h3>快速响应</h3>
            <p>上传图片即可开始分析，几秒钟内获得详细的分析报告和改进建议</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">🔓</div>
            <h3>开源免费</h3>
            <p>完全开源的项目，永久免费使用，透明的算法逻辑，值得信赖</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">📈</div>
            <h3>学习路径</h3>
            <p>不仅分析问题，更提供个性化的学习路径规划，助力持续提升</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 支持的考试类型 -->
    <section class="exam-types-section">
      <div class="container">
        <div class="section-header">
          <h2>支持的考试类型</h2>
          <p>覆盖各个学习阶段的主要考试类型</p>
        </div>
        <div class="exam-types-grid">
          <div class="exam-type-card">
            <div class="exam-icon">🎒</div>
            <h3>小学作文</h3>
            <p>记叙文、说明文、议论文等基础写作训练</p>
            <div class="exam-features">
              <span>基础语法</span>
              <span>结构组织</span>
              <span>创意表达</span>
            </div>
          </div>
          <div class="exam-type-card">
            <div class="exam-icon">📚</div>
            <h3>中学作文</h3>
            <p>初高中语文作文，提升写作水平</p>
            <div class="exam-features">
              <span>文体特征</span>
              <span>论证逻辑</span>
              <span>文学素养</span>
            </div>
          </div>
          <div class="exam-type-card">
            <div class="exam-icon">🎓</div>
            <h3>CET4/6</h3>
            <p>大学英语四六级写作专项训练</p>
            <div class="exam-features">
              <span>语法准确</span>
              <span>词汇丰富</span>
              <span>逻辑清晰</span>
            </div>
          </div>
          <div class="exam-type-card">
            <div class="exam-icon">🌍</div>
            <h3>IELTS/TOEFL</h3>
            <p>雅思托福学术写作，冲击高分</p>
            <div class="exam-features">
              <span>学术严谨</span>
              <span>批判思维</span>
              <span>跨文化交流</span>
            </div>
          </div>
          <div class="exam-type-card">
            <div class="exam-icon">🏛️</div>
            <h3>公务员考试</h3>
            <p>申论写作，政策理解与表达能力</p>
            <div class="exam-features">
              <span>政策理解</span>
              <span>问题分析</span>
              <span>治理智慧</span>
            </div>
          </div>
          <div class="exam-type-card coming-soon">
            <div class="exam-icon">📖</div>
            <h3>考研作文</h3>
            <p>研究生入学考试写作专项</p>
            <div class="exam-features">
              <span>学术规范</span>
              <span>深度思考</span>
              <span>创新观点</span>
            </div>
            <div class="coming-badge">即将上线</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 使用统计 -->
    <section class="stats-section">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">10,000+</div>
            <div class="stat-label">累计分析文章</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">5,000+</div>
            <div class="stat-label">活跃用户</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">95%</div>
            <div class="stat-label">用户满意度</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">24/7</div>
            <div class="stat-label">全天候服务</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 开始使用 -->
    <section class="cta-section">
      <div class="container">
        <div class="cta-content">
          <h2>准备好提升你的写作水平了吗？</h2>
          <p>立即开始使用 Kosin，体验专业的AI写作分析服务</p>
          <div class="cta-actions">
            <router-link to="/ocr" class="btn-primary large">
              <span>开始免费分析</span>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </router-link>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h3>📝 Kosin</h3>
            <p>开源免费的智能写作分析平台，助力每一次学习进步</p>
          </div>
          <div class="footer-section">
            <h4>产品</h4>
            <ul>
              <li><router-link to="/ocr">写作分析</router-link></li>
              <li><a href="#features">功能特色</a></li>
              <li><a href="#exam-types">支持类型</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h4>支持</h4>
            <ul>
              <li><a href="#">使用指南</a></li>
              <li><a href="#">常见问题</a></li>
              <li><a href="#">联系我们</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h4>开源</h4>
            <ul>
              <li><a href="#">GitHub</a></li>
              <li><a href="#">贡献指南</a></li>
              <li><a href="#">开源协议</a></li>
            </ul>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2025 Kosin. 开源项目，MIT协议</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 添加滚动动画效果
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate-in')
      }
    })
  }, observerOptions)

  // 观察所有需要动画的元素
  document.querySelectorAll('.feature-card, .exam-type-card, .stat-item').forEach(el => {
    observer.observe(el)
  })
})
</script>

<style scoped>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.home-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  line-height: 1.6;
  color: #333;
  overflow-x: hidden;
}

/* 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.logo h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #3a86ff;
  margin: 0;
}

.tagline {
  font-size: 0.8rem;
  color: #666;
  margin-left: 0.5rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link:hover {
  color: #3a86ff;
  background: rgba(58, 134, 255, 0.1);
}

.nav-link.active {
  color: #3a86ff;
  background: rgba(58, 134, 255, 0.1);
}

/* 英雄区域样式 */
.hero-section {
  padding: 120px 2rem 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="white" opacity="0.1"/><circle cx="10" cy="90" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.gradient-text {
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  line-height: 1.6;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.feature-tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.btn-primary {
  background: linear-gradient(45deg, #3a86ff, #8338ec);
  color: white;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(58, 134, 255, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(58, 134, 255, 0.4);
}

.btn-primary.large {
  padding: 1.2rem 2.5rem;
  font-size: 1.1rem;
}

.btn-secondary {
  color: white;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* 浮动卡片动画 */
.floating-cards {
  position: relative;
  height: 400px;
}

.card {
  position: absolute;
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  color: #333;
  min-width: 140px;
  text-align: center;
  animation: float 6s ease-in-out infinite;
}

.card-1 {
  top: 20px;
  left: 20px;
  animation-delay: 0s;
}

.card-2 {
  top: 120px;
  right: 40px;
  animation-delay: 2s;
}

.card-3 {
  bottom: 40px;
  left: 60px;
  animation-delay: 4s;
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.card-score {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3a86ff;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

/* 通用容器和区域样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #333;
}

.section-header p {
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

/* 特色功能区域 */
.features-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: white;
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
}

.feature-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.feature-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.feature-card p {
  color: #666;
  line-height: 1.6;
}

/* 考试类型区域 */
.exam-types-section {
  padding: 80px 0;
  background: white;
}

.exam-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.exam-type-card {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
}

.exam-type-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.exam-type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: #3a86ff;
}

.exam-type-card.coming-soon {
  opacity: 0.7;
  position: relative;
}

.coming-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #ffc107;
  color: #856404;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.exam-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.exam-type-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  color: #333;
}

.exam-type-card p {
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.exam-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.exam-features span {
  background: rgba(58, 134, 255, 0.1);
  color: #3a86ff;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* 统计数据区域 */
.stats-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #3a86ff, #8338ec);
  color: white;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}

.stat-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.stat-item.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* CTA区域 */
.cta-section {
  padding: 80px 0;
  background: #f8f9fa;
  text-align: center;
}

.cta-content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #333;
}

.cta-content p {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 2.5rem;
}

/* 页脚样式 */
.footer {
  background: #1a1a1a;
  color: white;
  padding: 60px 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #3a86ff;
}

.footer-section h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: white;
}

.footer-section p {
  color: #ccc;
  line-height: 1.6;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-section ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section ul li a:hover {
  color: #3a86ff;
}

.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 2rem;
  text-align: center;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-content {
    padding: 0 1rem;
    flex-direction: column;
    height: auto;
    padding: 1rem;
  }

  .nav-links {
    margin-top: 1rem;
    gap: 1rem;
  }

  .hero-section {
    padding: 100px 1rem 60px;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.1rem;
  }

  .floating-cards {
    height: 300px;
  }

  .card {
    min-width: 120px;
    padding: 1rem;
  }

  .features-grid,
  .exam-types-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .section-header h2 {
    font-size: 2rem;
  }

  .container {
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .feature-card,
  .exam-type-card {
    padding: 1.5rem;
  }
}

/* 动画延迟 */
.feature-card:nth-child(1) {
  transition-delay: 0.1s;
}

.feature-card:nth-child(2) {
  transition-delay: 0.2s;
}

.feature-card:nth-child(3) {
  transition-delay: 0.3s;
}

.feature-card:nth-child(4) {
  transition-delay: 0.4s;
}

.feature-card:nth-child(5) {
  transition-delay: 0.5s;
}

.feature-card:nth-child(6) {
  transition-delay: 0.6s;
}

.exam-type-card:nth-child(1) {
  transition-delay: 0.1s;
}

.exam-type-card:nth-child(2) {
  transition-delay: 0.2s;
}

.exam-type-card:nth-child(3) {
  transition-delay: 0.3s;
}

.exam-type-card:nth-child(4) {
  transition-delay: 0.4s;
}

.exam-type-card:nth-child(5) {
  transition-delay: 0.5s;
}

.exam-type-card:nth-child(6) {
  transition-delay: 0.6s;
}

.stat-item:nth-child(1) {
  transition-delay: 0.1s;
}

.stat-item:nth-child(2) {
  transition-delay: 0.2s;
}

.stat-item:nth-child(3) {
  transition-delay: 0.3s;
}

.stat-item:nth-child(4) {
  transition-delay: 0.4s;
}
</style>
